<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import UserService from '@/service/UserService';
import { Message } from 'element-ui';
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                email: '',
                phone: ''
            },
            rules: {
                email: [
                    {  message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
            }
        };
    },
    mounted(){
        this.ruleForm.username = JSON.parse(sessionStorage.getItem("userInfo")).username
        this.ruleForm.email = JSON.parse(sessionStorage.getItem("studentDetail")).email
        this.ruleForm.email = JSON.parse(sessionStorage.getItem("studentDetail")).phone
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updateInfo()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async updateInfo(){
            const params={
                id:sessionStorage.getItem("userId"),
                username:this.ruleForm.username,
                email:this.ruleForm.email,
                phone:this.ruleForm.phone
            }
          try{
             const response = await UserService.update(params)
             if (response.code == 0) {
                 let userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
                 userInfo.username = this.ruleForm.username
                 sessionStorage.removeItem("userInfo")
                 sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
                 let studentDetail = JSON.parse(sessionStorage.getItem("studentDetail"))
                 studentDetail.email = this.ruleForm.email
                 studentDetail.phone = this.ruleForm.phone
                 sessionStorage.removeItem("studentDetail")
                 sessionStorage.setItem("studentDetail",JSON.stringify(studentDetail))
                 Message.success("更新成功")
             }
          }catch(error){
             Message.error(error)
          }
        },
    }
}
</script>